<template>
  <div class="container">
    <div class="content-wrapper">
      <div class="body-map">
        <svg class="body-svg" viewBox="0 0 200 500">
          <!-- 头部 - ID: 1 -->
          <g class="body-part" data-part-id="1" @click="handlePartClick($event, 1)">
            <circle cx="100" cy="50" r="25" fill="white" stroke="black" stroke-width="2"/>
          </g>

          <!-- 眼睛 - ID: 2 -->
          <g class="body-part" data-part-id="2" @click="handlePartClick($event, 2)">
            <circle cx="90" cy="45" r="3" fill="white" stroke="black" stroke-width="2"/>
            <circle cx="110" cy="45" r="3" fill="white" stroke="black" stroke-width="2"/>
          </g>

          <!-- 耳朵 - ID: 3 -->
          <g class="body-part" data-part-id="3" @click="handlePartClick($event, 3)">
            <path d="M70,45 Q65,50 70,55" fill="white" stroke="black" stroke-width="2"/>
            <path d="M130,45 Q135,50 130,55" fill="white" stroke="black" stroke-width="2"/>
          </g>

          <!-- 鼻子 - ID: 4 -->
          <path class="body-part"
            d="M97,50 L103,50 L100,55"
            fill="white" stroke="black" stroke-width="2"
            data-part-id="4"
            @click="handlePartClick($event, 4)"
          />

          <!-- 口腔 - ID: 5 -->
          <path class="body-part"
            d="M90,60 Q100,65 110,60"
            fill="none" stroke="black" stroke-width="2"
            data-part-id="5"
            @click="handlePartClick($event, 5)"
          />

          <!-- 喉咙 - ID: 6 -->
          <rect class="body-part"
            x="90" y="75" width="20" height="15"
            fill="white" stroke="black" stroke-width="2"
            data-part-id="6"
            @click="handlePartClick($event, 6)"
          />

          <!-- 胸部 - ID: 7 -->
          <rect class="body-part"
            x="70" y="90" width="60" height="70"
            fill="white" stroke="black" stroke-width="2"
            data-part-id="7"
            @click="handlePartClick($event, 7)"
          />

          <!-- 腹部 - ID: 8 -->
          <rect class="body-part"
            x="70" y="160" width="60" height="80"
            fill="white" stroke="black" stroke-width="2"
            data-part-id="8"
            @click="handlePartClick($event, 8)"
          />

          <!-- 腰部 - ID: 9 -->
          <rect class="body-part"
            x="70" y="240" width="60" height="80"
            fill="white" stroke="black" stroke-width="2"
            data-part-id="9"
            @click="handlePartClick($event, 9)"
          />

          <!-- 四肢 - ID: 10 -->
          <!-- 左手 -->
          <path class="body-part"
            d="M70,100 L20,100"
            fill="none" stroke="black" stroke-width="2"
            data-part-id="10"
            @click="handlePartClick($event, 10)"
          />
          <!-- 右手 -->
          <path class="body-part"
            d="M130,100 L180,100"
            fill="none" stroke="black" stroke-width="2"
            data-part-id="10"
            @click="handlePartClick($event, 10)"
          />
          <!-- 左腿 -->
          <path class="body-part"
            d="M85,320 L85,450"
            fill="none" stroke="black" stroke-width="2"
            data-part-id="10"
            @click="handlePartClick($event, 10)"
          />
          <!-- 右腿 -->
          <path class="body-part"
            d="M115,320 L115,450"
            fill="none" stroke="black" stroke-width="2"
            data-part-id="10"
            @click="handlePartClick($event, 10)"
          />
        </svg>
      </div>
      <div class="parts-list">
        <div v-for="part in bodyParts"
             :key="part.id"
             class="part-item"
             :class="{ selected: selectedPartId === part.id }"
             @click="handlePartClick($event, part.id)">
          <h3>{{ part.partName }}</h3>
          <p>{{ part.description }}</p>
        </div>
      </div>
    </div>
    <div class="action-bar">
      <div class="selected-info" v-if="selectedPartId">
        已选择：<span class="selected-part">{{ getSelectedPartName }}</span>
      </div>
      <el-button
          type="primary"
          :disabled="!selectedPartId"
          @click="handleConfirm(selectedPartId)"
      >
        确认选择
      </el-button>
    </div>
    <!-- 添加李汉城按钮 -->
    <el-button 
      type="primary" 
      @click="goToAI" 
      style="margin-top: 20px; display: block; width: 120px;"
    >
      李汉城
    </el-button>
  </div>
</template>

<script>
import {getBodyPartsList} from "@/api/patient/patient.js";

export default {
  name: 'BodyParts',
  data() {
    return {
      bodyParts: [],
      selectedPartId: null,
      bodyAreas: []
    }
  },
  computed: {
    getSelectedPartName() {
      const selectedPart = this.bodyParts.find(part => part.id === this.selectedPartId)
      return selectedPart ? selectedPart.partName : ''
    }
  },
  created() {
    this.getBodyParts()
  },
  methods: {
    async getBodyParts() {
      try {
        const response = await getBodyPartsList()
        if (response.code === 200) {
          this.bodyParts = response.data
        } else {
          this.$message.error(response.msg || '获取身体部位数据失败')
        }
      } catch (error) {
        console.error('获取身体部位数据出错:', error)
        this.$message.error('获取数据失败')
      }
    },
    handlePartClick(event, partId) {
      this.selectedPartId = partId

      // 移除所有高亮
      document.querySelectorAll('.body-part').forEach(part => {
        part.classList.remove('active')
      })

      // 高亮所有相同ID的部位
      if (event.target.closest('.parts-list')) {
        // 如果点击的是列表，高亮对应的身体部位
        document.querySelectorAll(`.body-part[data-part-id="${partId}"]`).forEach(part => {
          part.classList.add('active')
        })
      } else {
        // 如果点击的是身体部位，只高亮被点击的元素
        const clickedPart = event.target.closest('.body-part')
        if (clickedPart) {
          clickedPart.classList.add('active')
        }
      }

      // 滚动到对应的列表项
      const listItem = document.querySelector(`.part-item:nth-child(${this.bodyParts.findIndex(p => p.id === partId) + 1})`)
      if (listItem) {
        listItem.scrollIntoView({ behavior: 'smooth' })
      }
    },
    handleConfirm(partId) {
      if (!partId) return
      const selectedPart = this.bodyParts.find(part => part.id === partId)
      if (selectedPart) {
        // 跳转到 receive 页面并携带 ID
        this.$router.push({
          path: '/patient/receive',
          query: {
            partId: selectedPart.id,
            partName: selectedPart.partName
          }
        })
      }
    },
    handleAreaClick(area) {
      // 实现区域点击逻辑
      console.log('区域点击:', area)
    },
    // 添加一个辅助方法来获取部位名称
    getPartName(partId) {
      switch(partId) {
        case 1: return '胸部';
        case 2: return '腹部';
        case 3: return '盆腔';
        case 4: return '四肢';
        case 5: return '头部';
        default: return '';
      }
    },
    goToAI() {
      this.$router.push({
        path: '/patient/lhc/aliyun',
        query: {
          from: 'body-index'
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.content-wrapper {
  display: flex;
  gap: 20px;
}

.body-map {
  flex: 1;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.body-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.body-part {
  cursor: pointer;
  transition: all 0.3s;
}

.body-part:hover {
  stroke: #4CAF50;
  stroke-width: 3;
}

.body-part.active {
  stroke: #2196F3;
  stroke-width: 3;
}

.parts-list {
  flex: 1;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow-y: auto;
  max-height: 600px;
}

.part-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.3s;
}

.part-item:hover {
  background-color: #f0f0f0;
}

.part-item h3 {
  margin-bottom: 5px;
  color: #333;
}

.part-item p {
  color: #666;
  font-size: 14px;
}

.selected {
  background-color: #e8f5e9;
}

.action-bar {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-info {
  color: #666;
  font-size: 14px;
}

.selected-part {
  color: #4CAF50;
  font-weight: bold;
  margin-left: 5px;
}

.grid-lines {
  pointer-events: none;
  opacity: 0.3;
}

.body-outline {
  pointer-events: none;
}

.detail-lines {
  pointer-events: none;
  opacity: 0.4;
}

/* 添加更细致的网格背景 */
.detail-grid {
  stroke: #f5f5f5;
  stroke-width: 0.5;
  opacity: 0.3;
}

/* 心脏相关样式 */
.heart-main {
  fill: rgba(220, 50, 50, 0.1);
  stroke: #d32f2f;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 1px rgba(244, 67, 54, 0.3));
}

.heart-detail {
  fill: none;
  stroke: #c62828;
  stroke-width: 0.8;
  opacity: 0.8;
}

.heart-pulse {
  fill: none;
  stroke: #ef5350;
  stroke-width: 0.8;
  opacity: 0;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0;
    stroke-width: 0.8;
  }
  50% {
    opacity: 0.5;
    stroke-width: 1.2;
  }
  100% {
    opacity: 0;
    stroke-width: 0.8;
  }
}

.heart-group:hover .heart-main {
  fill: rgba(220, 50, 50, 0.2);
  stroke: #ef5350;
  filter: drop-shadow(0 0 2px rgba(244, 67, 54, 0.5));
}

.heart-group.active .heart-main {
  fill: rgba(220, 50, 50, 0.3);
  stroke: #d32f2f;
  filter: drop-shadow(0 0 3px rgba(244, 67, 54, 0.8));
}

.face-features path {
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.muscle-details .detail-line {
  stroke: #ddd;
  stroke-width: 0.5;
  fill: none;
  opacity: 0.6;
}

.body-part {
  stroke-linejoin: round;
  stroke-linecap: round;
}

.joint-point {
  fill: #666;
  stroke: none;
  opacity: 0.3;
}

.segment-line {
  stroke: #ddd;
  stroke-width: 0.8;
  stroke-dasharray: 2 2;
  opacity: 0.6;
}

.body-outline {
  fill: transparent;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detail-line {
  stroke: #ddd;
  stroke-width: 0.5;
  fill: none;
  opacity: 0.4;
}

.vessel-line {
  stroke: #ef5350;
  stroke-width: 0.5;
  fill: none;
  opacity: 0.2;
}

.muscle-lines path {
  stroke: #ccc;
  stroke-width: 0.5;
  fill: none;
  opacity: 0.4;
}

.hair-detail {
  pointer-events: none;
}

.muscle-detail {
  pointer-events: none;
  opacity: 0.4;
}

.detail-line {
  stroke: #ddd;
  stroke-width: 0.5;
  fill: none;
  opacity: 0.4;
}

.joint-point {
  fill: #666;
  stroke: none;
  opacity: 0.3;
}

.vessel-line {
  stroke: #ef5350;
  stroke-width: 0.5;
  fill: none;
  opacity: 0.2;
}

.body-part {
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: all 0.3s ease;
}

.body-part:hover {
  filter: drop-shadow(0 0 2px rgba(76, 175, 80, 0.5));
}

.anatomy-line {
  stroke: #ddd;
  stroke-width: 0.5;
  fill: none;
  opacity: 0.3;
  pointer-events: none;
}

.joint-points circle {
  fill: #666;
  stroke: none;
  opacity: 0.25;
  pointer-events: none;
}

.body-part {
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
}

.body-part:hover {
  filter: drop-shadow(0 0 2px rgba(76, 175, 80, 0.5));
  stroke-width: 1.5;
}

.body-part.active {
  fill: rgba(76, 175, 80, 0.5);
  stroke: #4CAF50;
  stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(76, 175, 80, 0.6));
}

.face-features path {
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.muscle-lines path {
  stroke-width: 0.5;
  opacity: 0.4;
}

.heart-group {
  transition: all 0.3s;
}

.heart-group:hover .heart-main {
  fill: #ef5350;
  filter: drop-shadow(0 0 2px rgba(244, 67, 54, 0.5));
}

.body-part {
  cursor: pointer;
  transition: all 0.3s;
}

.body-part:hover {
  filter: brightness(0.95) drop-shadow(0 0 3px rgba(76, 175, 80, 0.3));
  transform: scale(1.01);
}

.body-part.active {
  fill: #c8e6c9;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(76, 175, 80, 0.4));
}

/* 添加大脑区域的特殊样式 */
.body-part[data-part-id="1"]:hover {
  fill: #ffcdd2;
}

.body-part[data-part-id="1"].active {
  fill: #ef9a9a;
}

/* 解剖学细节样式 */
.anatomy-details path {
  pointer-events: none;
  opacity: 0.3;
}

/* 血管系统动画 */
.vessel-system path {
  animation: flow 3s infinite linear;
}

@keyframes flow {
  0% { stroke-dasharray: 5,5; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 5,5; stroke-dashoffset: -20; }
}

/* 器官标记样式 */
.organ-markers circle {
  opacity: 0.3;
}

/* 心脏区域特效 */
.heart-region {
  animation: heartbeat 1s infinite ease-in-out;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.5; }
}

/* 肌肉纹理效果 */
.muscle-texture path {
  opacity: 0.2;
}

/* 悬停效果增强 */
.body-part:hover {
  fill: rgba(33, 150, 243, 0.1);
  stroke: #2196F3;
  filter: drop-shadow(0 0 3px rgba(33, 150, 243, 0.3));
}

.body-part:hover .anatomy-details path {
  opacity: 0.5;
}

/* 选中状态增强 */
.body-part.active {
  fill: rgba(33, 150, 243, 0.2);
  stroke: #1976D2;
  filter: drop-shadow(0 0 4px rgba(33, 150, 243, 0.4));
}

.body-part.active .anatomy-details path {
  opacity: 0.7;
}

/* 解剖网格背景 */
.anatomy-grid {
  opacity: 0.1;
}

/* 器官轮廓 */
.organ-outline {
  fill: none;
  stroke: #666;
  stroke-width: 0.5;
  opacity: 0.3;
}
</style>
